<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填写订单信息</title>
    <link rel="stylesheet" href="/css/index.css">
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="order_head">
    <div class="head_background">
        <div class="head_box">
            <a href="index.html" class="head_left_a"><img src="/img/logo.jpg" alt="" class="head_left_p"></a>
            <h1 class="head_h1">确认订单</h1>
            <div class="head_right">
                <span class="head_right_in" th:text="${session.currentUser.memberName}"></span>
                <span class="head_right_in">∨ |</span>
                <a href="" class="head_right_in">我的订单</a>
            </div>

        </div>
    </div>
</div>
<div class="order_body">
    <div class="order_body_background">
        <div class="order_line">
            <div class="order_lien_in">
                <h3 class="order_title">收货地址</h3>
            </div>
            <div class="order_lien_in">
                <span class="order_span">|</span>
                <span class="order_span">大型商场下单后,收货地址将无法修改.</span>
            </div>
            <div class="order_lien_in">
                <a href="" class="order_a">快递公司会电话联系您确认送货时间,收货时需要核对身份信息</a>
            </div>
            <div class="order_lien_in"></div>
        </div>

        <!-- 添加新地址 -->
        <div class="order_box">
            <div class="order_box_in" id="addBtn">
                <div class="order_box_circle"><p class="order_box_p1">+</p></div>
                <p class="order_box_p">填加新地址</p>
            </div>
            <div class="order_box_in location_checked" th:each="l:${locations}">
                <input type="hidden" th:value="${l.id}">
                <!--                <div class="order_box_circle">-->
                <!--                    <p class="order_box_p1">+</p>-->
                <!--                </div>-->
                <p class="order_box_p" th:text="${l.province} +' '+ ${l.city} +' '+ ${l.area}">填加新地址</p>
            </div>
        </div>

        <div class="order_line order_line_bordtr">
            <div class="order_lien_in order_in">
                <h3 class="order_title">支付方式</h3>
            </div>
            <div class="order_lien_in">
                <a href="" class="order_a">在线支付(支持微信支付、支付宝、银联、财付通、小米钱包等）</a>
            </div>
            <div class="order_lien_in"></div>
        </div>
        <div class="order_line order_line_bordtr">
            <div class="order_lien_in order_in">
                <h3 class="order_title">配送方式</h3>
            </div>
            <div class="order_lien_in">
                <a href="" class="order_a">快递配送(运费100元)</a>
            </div>
            <div class="order_lien_in"></div>
        </div>
        <div class="order_line order_line_bordtr">
            <div class="order_lien_in">
                <h3 class="order_title">配送时间</h3>
            </div>
            <p class="order_PStime">不限送货时间：周一至周日</p>
            <p class="order_PStime">工作日送货：周一至周五</p>
            <p class="order_PStime"> 双休日、假日送货：周六至周日</p>
            <div class="order_lien_in"></div>
        </div>
        <div class="order_line order_line_bordtr_1">
            <div class="order_lien_in">
                <h3 class="order_title">发票</h3>
            </div>
            <div class="order_lien_in order_line_bordtr_2">
                <a href="" class="order_a">电子发票 个人 商品明细 修改 ></a>
            </div>
            <div class="order_lien_in"></div>
        </div>
        <div class="order_line order_line_bordtr">
            <div class="order_lien_in">
                <h3 class="order_title">商品及优惠券</h3>
            </div>
            <div class="order_lien_in">
                <a href="/cart/page"><span class="order_span_rigth">返回购物车</span></a>
            </div>
            <div class="order_lien_in"></div>
        </div>

        <!-- 商品详情，遍历集合中的所有商品 -->
        <div class="order_line order_line_bordtr" th:each="p: ${products}">
            <div class="order_lien_in">
                <img class="order_price_tv" style="height: 18px; width: 27px" src="/img/A4.png" alt="">
                <p class="order_price">
                    <span th:text="${p.name}"></span>&nbsp;&nbsp;&nbsp;
                    <span th:text="${p.model}"></span>&nbsp;&nbsp;&nbsp;
                    <span th:text="${p.color}"></span>&nbsp;&nbsp;&nbsp;
                </p>
                <p class="order_price" th:text="${p.amount} + 个"></p>
            </div>
            <div class="order_lien_in">
                <p class="order_price_1" th:text="${p.price}">899元 x 1</p>
            </div>
            <div class="order_price1">
                <p class="order_price_2" th:text="${p.price * p.amount} + 元">899元</p>
            </div>
            <div class="order_lien_in"></div>
        </div>

        <div class="order_line ">
            <div class="order_lien_in">
                <p class="order_price_11">商品件数:</p>
            </div>
            <div class="order_price1">
                <p class="order_price_2">1件</p>
            </div>
        </div>
        <div class="order_line ">
            <div class="order_lien_in">
                <p class="order_price_11">金额合计:</p>
            </div>
            <div class="order_price1">
                <p class="order_price_2">899元</p>
            </div>

        </div>
        <div class="order_line ">
            <div class="order_lien_in">
                <p class="order_price_11">运费:</p>
            </div>
            <div class="order_price1">
                <p class="order_price_2">100元</p>
            </div>
        </div>
        <div class="order_line order_line_bordtr">
            <div class="order_lien_in">
                <p class="order_price_11"><br>应付总额:</p>
            </div>
            <div class="order_price1">
                <p class="order_price_2"><span style="font-size: 35px">999</span>元</p>

            </div>
        </div>
        <div class="pay">
            <form action="/order/save" method="post">
                <button class="pay_a">结算</button>
                <input type="text" th:value="${ids}" name="ids">
                <input type="hidden" id="locationId" name="locationId">
            </form>
        </div>
    </div>
</div>

<!-- 底部菜单模块-->
<th:block th:include="foot"/>

<!--弹出窗口的模板 -->
<!-- 添加新地址  -->
<script id="template1" type="text/html">
    <form class="layui-form" action="" lay-filter="form1">
        <div class="layui-form-item" style="margin-top:15px">
            <div class="layui-inline">
                <label class="layui-form-label">省/自治区/直辖市</label>
                <div class="layui-input-inline">
                    <input type="text" name="province" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top:15px">
            <div class="layui-inline">
                <label class="layui-form-label">市</label>
                <div class="layui-input-inline">
                    <input type="text" name="city" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top:15px">
            <div class="layui-inline">
                <label class="layui-form-label">区</label>
                <div class="layui-input-inline">
                    <input type="text" name="area" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">详细地址</label>
                <div class="layui-input-inline">
                    <input type="text" name="address" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">收货人</label>
                <div class="layui-input-inline">
                    <input type="text" name="consignee" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">收货电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="tel" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="margin-top:15px;margin-left:130px">
            <div class="layui-inline">
                <input id="resetBtn" type="button" value="重置" class="layui-btn"
                       style="background-color: white;color: black;border: 1px black"/>
                <input id="saveBtn" type="button" value="保存" class="layui-btn"/>
            </div>
        </div>
    </form>
</script>

<!-- 引入依赖的js文件 -->
<script src="/layui/layui.js"></script>
<script src="/js/common.js"></script>

<script th:inline="none">
    //告诉浏览器加载layui框架中的哪些组件
    layui.use(['layer', 'form', 'treeTable', 'table', 'upload'], function () {

        //第一步：先对加载的组件起名字，才能通过对象名调方法
        var layer = layui.layer;//操作弹窗
        var form = layui.form;//操作表单
        var treeTable = layui.treeTable;//树形表格
        var table = layui.table;//操作表格
        var upload = layui.upload;//上传文件
        var $ = layui.jquery;//从layui中把jquery拿出来用

        $("body").on("click", ".location_checked", function () {
            //获取选中的地址的id
            var id = $(this).children().eq(0).val();
            //给隐藏框赋值
            $("#locationId").val(id);
        });

        //给保存按钮绑事件
        //事件委托 标签名选择器 id选择器：作用于整个<body><body/> 只要当前页面有saveBtn，就能保存
        $("body").on("click", "#saveBtn", function () {
            //获取表单中的所有数据 lay-filter="form1"
            var data = form.val("form1");
            //判断属性是不是都填上了
            if (!data.province) {
                layer.msg("请填写省份")
                return false;
            }
            if (!data.city) {
                layer.msg("请填写市")
                return false;
            }
            if (!data.area) {
                layer.msg("请填写区")
                return false;
            }
            if (!data.address) {
                layer.msg("请填写详细地址")
                return false;
            }
            if (!data.consignee) {
                layer.msg("请填写收货人姓名")
                return false;
            }
            if (!data.tel) {
                layer.msg("请填写收货电话")
                return false;
            }
            //把数据传到后台 Ajax异步请求
            $.post("/member/addLocation", data, function () {
                //关窗口
                layer.closeAll();
                //给成功提示
                layer.msg("保存成功");
            });
        });

        //给新增按钮绑定事件
        $("#addBtn").on("click", function () {
            //弹出窗口
            layer.open({
                title: "新增收货地址",
                type: 1,
                area: ['400px', '600px'],
                content: $("#template1").html()
            });

        });


    });


</script>

</body>
</html>